<template>
  <view class="container">
    <view class="box1">获取到盒子的宽高, 位置信息</view>
    <view class="box1">测试一下</view>
    <view class="box1">测试一下</view>
    <view class="box1">测试一下</view>
    <view class="box1">测试一下</view>
    <view class="box1">测试一下</view>
    <view class="box1">测试一下</view>
    <view class="box1">测试一下</view>
    <view class="box1">测试一下</view>
    <view class="box1">测试一下</view>
    <view class="box1">测试一下</view>
    <view class="box1">测试一下</view>
  </view>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

onMounted(() => {
  // 1. 创建查询器对象
  const selectQuery = uni.createSelectorQuery();
  // console.log(selectQuery);

  // 2. 使用查询器对象调用方法获取信息
  selectQuery.select('.box1').boundingClientRect((res) => {
    // console.log(res);
  });

  selectQuery.selectAll('.box1').boundingClientRect((res) => {
    // console.log(res);
  });

  selectQuery.selectViewport().boundingClientRect((res) => {
    console.log(res);
  });

  selectQuery.selectViewport().scrollOffset((res) => {
    console.log(res);
  });

  // 3. 执行查询器
  selectQuery.exec();
});
</script>

<style lang="scss" scoped>
.box1 {
  width: 200rpx;
  height: 200rpx;
  background-color: red;
  margin-top: 50rpx;
  margin-left: 50rpx;
}
</style>
